<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="page-title">轮回详情</h1>
        <div class="breadcrumb-container">
          <router-link to="/" class="link link-hover">首页</router-link>
          <span class="mx-2">/</span>
          <router-link to="/reincarnation" class="link link-hover">轮回管理</router-link>
          <span class="mx-2">/</span>
          <span>轮回详情</span>
        </div>
      </div>
      <div class="btn-group">
        <router-link :to="`/reincarnation/${id}/edit`" class="btn btn-primary gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
          </svg>
          编辑
        </router-link>
      </div>
    </div>

    <!-- 基本信息 -->
    <div class="card bg-base-100 shadow-lg mb-6">
      <div class="card-body">
        <h2 class="card-title">基本信息</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div>
            <div class="text-sm text-base-content/60">轮回编号</div>
            <div>{{ reincarnation.id }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">轮回时间</div>
            <div>{{ formatDate(reincarnation.time) }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">轮回官</div>
            <div>{{ reincarnation.officer }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">状态</div>
            <div class="badge" :class="getStatusBadgeClass(reincarnation.status)">
              {{ getStatusLabel(reincarnation.status) }}
            </div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">投胎地点</div>
            <div>{{ reincarnation.location }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">新身份</div>
            <div>{{ reincarnation.newIdentity }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 前世信息 -->
    <div class="card bg-base-100 shadow-lg mb-6">
      <div class="card-body">
        <h2 class="card-title">前世信息</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div>
            <div class="text-sm text-base-content/60">姓名</div>
            <div>{{ reincarnation.soul.name }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">性别</div>
            <div>{{ reincarnation.soul.gender === 'male' ? '男' : '女' }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">年龄</div>
            <div>{{ reincarnation.soul.age }}岁</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">生辰</div>
            <div>{{ formatDate(reincarnation.soul.birthDate) }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">祭日</div>
            <div>{{ formatDate(reincarnation.soul.deathDate) }}</div>
          </div>
          <div>
            <div class="text-sm text-base-content/60">籍贯</div>
            <div>{{ reincarnation.soul.birthplace }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 审判记录 -->
    <div class="card bg-base-100 shadow-lg mb-6">
      <div class="card-body">
        <h2 class="card-title">审判记录</h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>时间</th>
                <th>审判官</th>
                <th>判决</th>
                <th>刑期</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="judgment in reincarnation.soul.judgments" :key="judgment.id">
                <td>{{ formatDate(judgment.time) }}</td>
                <td>{{ judgment.judge }}</td>
                <td>
                  <div class="badge" :class="getJudgmentTypeBadgeClass(judgment.type)">
                    {{ getJudgmentTypeLabel(judgment.type) }}
                  </div>
                </td>
                <td>{{ judgment.duration }}年</td>
                <td>{{ judgment.remarks }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 轮回详情 -->
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <h2 class="card-title">轮回详情</h2>
        <div class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">轮回原因</span>
            </label>
            <textarea
              :value="reincarnation.reason"
              class="textarea textarea-bordered"
              rows="4"
              disabled
            ></textarea>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">新世条件</span>
            </label>
            <textarea
              :value="reincarnation.conditions"
              class="textarea textarea-bordered"
              rows="4"
              disabled
            ></textarea>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">备注</span>
            </label>
            <textarea
              :value="reincarnation.remarks"
              class="textarea textarea-bordered"
              rows="2"
              disabled
            ></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formatDate } from '@/utils/date'
import { ReincarnationService } from '@/api/services'
import { useLoadingStore } from '@/stores/loading'
import { useToast } from '@/composables/useToast'

const route = useRoute()
const router = useRouter()
const loadingStore = useLoadingStore()
const toast = useToast()

const id = route.params.id as string

// 状态
const reincarnation = ref({
  id: '',
  time: '',
  officer: '',
  status: '',
  location: '',
  newIdentity: '',
  reason: '',
  conditions: '',
  remarks: '',
  soul: {
    name: '',
    gender: '',
    age: 0,
    birthDate: '',
    deathDate: '',
    birthplace: '',
    judgments: [],
  },
})

// 方法
const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'pending':
      return 'badge-warning'
    case 'processing':
      return 'badge-info'
    case 'completed':
      return 'badge-success'
    default:
      return 'badge-ghost'
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'pending':
      return '待执行'
    case 'processing':
      return '执行中'
    case 'completed':
      return '已完成'
    default:
      return '未知'
  }
}

const getJudgmentTypeBadgeClass = (type: string) => {
  switch (type) {
    case 'heaven':
      return 'badge-success'
    case 'hell':
      return 'badge-error'
    case 'reincarnate':
      return 'badge-info'
    default:
      return 'badge-ghost'
  }
}

const getJudgmentTypeLabel = (type: string) => {
  switch (type) {
    case 'heaven':
      return '上天界'
    case 'hell':
      return '入地狱'
    case 'reincarnate':
      return '再轮回'
    default:
      return '未知'
  }
}

const loadReincarnation = async () => {
  try {
    loadingStore.show()
    const data = await ReincarnationService.getReincarnation(id)
    reincarnation.value = data
  } catch (error: any) {
    toast.error(error.message)
    router.push('/reincarnation')
  } finally {
    loadingStore.hide()
  }
}

// 生命周期
onMounted(() => {
  loadReincarnation()
})
</script>

<style scoped>
.badge {
  @apply px-2 py-1;
}
</style>
